import React, { Component } from 'react'
import {
    Modal,
    Flex,
    Icon
} from 'antd-mobile';
import MyScroll from '../../components/MyScroll/MyScroll';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { parse } from 'query-string';

const alert = Modal.alert;
import { goto_search_title, goto_search_body } from "./GoSearch.less"
import cartdelect from '../../assets/svg/cartdelect.svg';

class GoSearch extends Component {
    constructor(props) {
        super(props);
        this.state = {
           value: parse(props.location.search).showKeyword ==undefined ? "" : parse(props.location.search).showKeyword ,
            arr:[],
            pageNo:1,
            hotWords:[],
            pagerCount:0,
            id:this.props.match.params.storeId
            //id:this.props.match.params.id
        };
        // console.log(props);

    }

    componentDidMount() {
      // this.props.dispatch({ type: 'storesShow/getclassEFF',obj:{storeId:this.props.match.params.id }})
        let history = window.localStorage.getItem('memberIdHistory');
        // console.log(history);
        // console.log(history!=null&&history.includes("[")&&history.includes("]")&&history.startsWith("[")&&history.endsWith("]"));

        if(history!=null&&history.includes("[")&&history.includes("]")){
            this.setState({
                arr:JSON.parse(history)
            })
        }else {
            this.setState({
                arr: []
            });
            let arr=[];
            //console.log(JSON.stringify(arr));
            window.localStorage.setItem('memberIdHistory',JSON.stringify(arr));
        }

        // this.getdata(this.state.pageNo)
    }

    onSubmit = (value) => {
        // let memberId = window.localStorage.getItem('memberId');
        // if(memberId){
        //console.log(e);
        // let { value } = this.state;
        let history = window.localStorage.getItem('memberIdHistory');
        // console.log(history);
        if(!!history){
            let arr = JSON.parse(history);
            // console.log(arr);
            if(value!=''){
                arr.unshift(value);
                let array = Array.from(new Set(arr));
                if(array.length>10){
                    let newArr =  array.slice(0,10);
                    window.localStorage.setItem('memberIdHistory',JSON.stringify(newArr));
                }else {
                    window.localStorage.setItem('memberIdHistory',JSON.stringify(array));
                }
            }
        }else {
            let arr=[];
            arr.push(value);
            window.localStorage.setItem('memberIdHistory',JSON.stringify(arr));
        }
        // }
        //   console.log(value)   searchType++++++keyword+++++++storeId
        //this.props.dispatch(routerRedux.replace(`/gotosearch?showKeyword=${encodeURIComponent(value)}`));
        this.props.dispatch(routerRedux.replace(`/storesSearch/keywordSearch/${this.props.match.params.storeId}/${encodeURIComponent(value)}`));
        // if (value == '') {
        //     this.props.dispatch(routerRedux.push(`/goodsearch/keywordSearch`));
        // } else {
        //     this.props.dispatch(routerRedux.push(`/goodsearch/keywordSearch?keyword=${encodeURIComponent(value)}&showKeyword=${encodeURIComponent(value)}`));
        // }

    }

    onChange = (e) => {
        this.setState({
            value: e.target.value
        });
    };

    render() {
        let { arr, value } = this.state;
       const { data } = this.props.storesShow;
        // console.log(this.props.storesShow);

        return (
            <Flex style={{
                height:"100%"
            }} direction="column">
                <Flex className={ goto_search_title }>
                    {/*<Icon type='left' style={{ paddingLeft:'0.1rem' }} onClick={() => this.props.router.goBack()}/>*/}
                    <Flex className="search_input">
                        <form action="" onSubmit={ (e)=>{ this.onSubmit(value),e.preventDefault(); } }>
                            <input placeholder="搜索本店" autoFocus type="search" value={ value } onChange={this.onChange} />
                        </form>
                        <Icon className="search_icon" style={ value.length > 0 ? { color:"#fff" } : {} } type="search" size="md" />
                    </Flex>
                    {
                        value.length > 0 ?
                            <div className="search_cancelbtn" onClick={ ()=>{ this.onSubmit(value) } }>搜索
                            </div> :
                            <div className="search_cancelbtn" onClick={() => { this.props.dispatch(routerRedux.goBack()); }}>取消
                            </div>
                    }
                </Flex>
            </Flex>
        )
    }
}

export default connect(({storesShow }) => ({ storesShow}))(GoSearch);
